﻿<div class="WAll">
	<div class="BlockLabel  PL PR">可以设置单个“编辑”按钮，启动排序。 <a href="javascript:;" class="ToggleSortable">编辑</a></div>
	<div class="BlockLabel  PL PR">也也可使用分开的按钮启动排序。<br/>
		<a href="javascript:;" data-sortable=".Sortable" class="OpenSortable">打开排序</a> 
		<a href="javascript:;" data-sortable=".Sortable" class="CloseSortable">取消排序</a>
		<a href="javascript:;" data-sortable=".Sortable" class="ToggleSortable">切换排序</a>
	</div>
	<ul class="ListBlock Sortable">
		<li class="ListItem">
			<div class="ItemCon InkRipple">
				<div class="ItemMedia">
					<img class="Icon" src="images/svg/iconfont-user.svg" alt="用户">
				</div>
				<div class="ItemInner">
					<div class="ItemTitle">
					1、Ivan Petrov
					</div>
					<div class="ItemAfter">
					CEO
					</div>
				</div>
			</div>
			<div class="SortableHandler"></div>
		</li>
		<li class="ListItem">
			<div class="ItemCon InkRipple">
				<div class="ItemMedia">
					<img class="Icon" src="images/svg/iconfont-user.svg" alt="用户">
				</div>
				<div class="ItemInner">
					<div class="ItemTitle">
					2、John Doe
					</div>
					<div class="ItemAfter">
					<span class="Badge BadgePrimary">13</span>
					</div>
				</div>
			</div>
			<div class="SortableHandler"></div>
		</li>
		<li class="ListItem">
			<div class="ItemCon InkRipple">
				<div class="ItemMedia">
					<img class="Icon" src="images/svg/iconfont-user.svg" alt="用户">
				</div>
				<div class="ItemInner">
					<div class="ItemTitle">
					3、Jenna Smith
					</div>
				</div>
			</div>
			<div class="SortableHandler"></div>
		</li>
		<li class="ListItem">
			<div class="ItemCon InkRipple">
				<div class="ItemMedia">
					<img class="Icon" src="images/svg/iconfont-user.svg" alt="用户">
				</div>
				<div class="ItemInner">
					<div class="ItemTitle">
					4、Ivan Petrov
					</div>
					<div class="ItemAfter">
					CEO
					</div>
				</div>
			</div>
			<div class="SortableHandler"></div>
		</li>
		<li class="ListItem">
			<div class="ItemCon InkRipple">
				<div class="ItemMedia">
					<img class="Icon" src="images/svg/iconfont-user.svg" alt="用户">
				</div>
				<div class="ItemInner">
					<div class="ItemTitle">
					5、John Doe
					</div>
					<div class="ItemAfter">
					<span class="Badge BadgePrimary">13</span>
					</div>
				</div>
			</div>
			<div class="SortableHandler"></div>
		</li>
		<li class="ListItem">
			<div class="ItemCon InkRipple">
				<div class="ItemMedia">
					<img class="Icon" src="images/svg/iconfont-user.svg" alt="用户">
				</div>
				<div class="ItemInner">
					<div class="ItemTitle">
					6、Jenna Smith
					</div>
				</div>
			</div>
			<div class="SortableHandler"></div>
		</li>
	</ul>

	<ul class="ListBlock MediaList Sortable">
		<li class="ListItem active">
			<a href="javascript:;" class="ItemLink ItemCon InkRipple">
				<div class="ItemMedia"><img src="images/01.jpg" width="80"></div>
				<div class="ItemInner">
					<div class="ItemTitleRow">
						<div class="ItemTitle">1、黄色潜艇</div>
						<div class="ItemAfter">$15</div>
					</div>
					<div class="ItemSubtitle">披头士乐队</div>
					<div class="ItemText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
				</div>
			</a>
			<div class="SortableHandler"></div>
		</li>
		<li class="ListItem">
			<a href="javascript:;" class="ItemLink ItemCon InkRipple">
				<div class="ItemMedia"><img src="images/01.jpg" width="80"></div>
				<div class="ItemInner">
					<div class="ItemTitleRow">
						<div class="ItemTitle">2、黄色潜艇</div>
						<div class="ItemAfter">$15</div>
					</div>
					<div class="ItemSubtitle">披头士乐队</div>
					<div class="ItemText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
				</div>
			</a>
			<div class="SortableHandler"></div>
		</li>
		<li class="ListItem">
			<a href="javascript:;" class="ItemLink ItemCon InkRipple">
				<div class="ItemMedia"><img src="images/01.jpg" width="80"></div>
				<div class="ItemInner">
					<div class="ItemTitleRow">
						<div class="ItemTitle">3、黄色潜艇</div>
						<div class="ItemAfter">$15</div>
					</div>
					<div class="ItemSubtitle">披头士乐队</div>
					<div class="ItemText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
				</div>
			</a>
			<div class="SortableHandler"></div>
		</li>
		<li class="ListItem">
			<a href="javascript:;" class="ItemLink ItemCon InkRipple">
				<div class="ItemMedia"><img src="images/01.jpg" width="80"></div>
				<div class="ItemInner">
					<div class="ItemTitleRow">
						<div class="ItemTitle">4、黄色潜艇</div>
						<div class="ItemAfter">$15</div>
					</div>
					<div class="ItemSubtitle">披头士乐队</div>
					<div class="ItemText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
				</div>
			</a>
			<div class="SortableHandler"></div>
		</li>
		<li class="ListItem">
			<a href="javascript:;" class="ItemLink ItemCon InkRipple">
				<div class="ItemMedia"><img src="images/02.jpg" width="80"></div>
				<div class="ItemInner">
					<div class="ItemTitleRow">
						<div class="ItemTitle">5、不要阻止我</div>
						<div class="ItemAfter">$22</div>
					</div>
					<div class="ItemSubtitle">女王</div>
					<div class="ItemText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
				</div>
			</a>
			<div class="SortableHandler"></div>
		</li>
	</ul>
	
</div>




















